<template>
    <div class="container">
        <div class="monitor">
            <div class="content" v-if="dataFlag">
                <div class="title">
                    <Tabs  v-model="tabActiveName"  @on-click="setTabClick">
                        <TabPane v-for="item in list" :value="item.id" :key="item.id" :label="item.code" ></TabPane>
                    </Tabs>
                </div>
                <div class="msg">
                    <div class="left">
                        <div class="top sjj">
                            <div class="dz">
                                <div class="sjj_left" >
                                     <img src="./../../assets/images/fse/lift/sjj_04.png" alt="" v-if="leftFlag" class="left_img">
                                     <div class="sjj_zuo" v-if="!getJSON(zuoObj)&&zuoObj.fvsDevice&&leftFlag" @click="getFvs(zuoObj,1)">
                                        <img src="./../../assets/images/fse/common/camera_0.png" v-if="zuoObj.fvsDevice.deviceStatus == 0" class="disabled" />
                                        <img src="./../../assets/images/fse/common/camera_1.png" v-if="zuoObj.fvsDevice.deviceStatus == 1" />
                                    </div>
                                </div>
                                <img src="./../../assets/images/fse/lift/sjj_03.png" />
                                <div class="sjj_right" >
                                    <img src="./../../assets/images/fse/lift/sjj_02.png" v-if="rightFlag" class="right_img" />
                                    <div class="sjj_you" v-if="!getJSON(youObj)&&youObj.fvsDevice&&rightFlag" @click="getFvs(youObj,2)">
                                        <img src="./../../assets/images/fse/common/camera_0.png" v-if="youObj.fvsDevice.deviceStatus == 0" class="disabled" />
                                        <img src="./../../assets/images/fse/common/camera_1.png" v-if="youObj.fvsDevice.deviceStatus == 1" />
                                    </div>
                                </div>
                            </div>
                            <div class="db">
                                <img src="./../../assets/images/fse/lift/sjj_01.png" />
                            </div>
                            <div class="bottom_left" v-if="leftFlag">
                                <p>
                                    <span>后门:</span>
                                    <span v-if="left_backDoorState == 1">关闭</span>
                                    <span v-if="left_backDoorState == 2">开启</span>
                                </p>
                                <p>
                                    <span>前门:</span>
                                    <span v-if="left_frontDoorState == 1">关闭</span>
                                    <span v-if="left_frontDoorState == 2">开启</span>
                                </p>
                            </div>
                            <div class="bottom_right" v-if="rightFlag">
                                <p>
                                    <span>后门:</span>
                                    <span v-if="right_backDoorState == 1">关闭</span>
                                    <span v-if="right_backDoorState == 2">开启</span>
                                </p>
                                <p>
                                    <span>前门:</span>
                                    <span v-if="right_frontDoorState == 1">关闭</span>
                                    <span v-if="right_frontDoorState == 2">开启</span>
                                </p>
                            </div>
                        </div>
                        
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/lift/lift_gd.png" />
                                    <span>高度</span>
                                </p>
                                <p class="num">
                                    <span v-if="leftFlag">{{left_height}}</span>
                                    <span v-if="leftFlag&&rightFlag">/</span>
                                    <span v-if="rightFlag">{{right_height}}</span>m
                                </p>
                                <p class="data">
                                    <span @click="getMsg(0)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/lift/lift_sd.png" />
                                    <span>速度</span>
                                </p>
                                <p class="num">
                                    <span v-if="leftFlag">{{left_speed}}</span>
                                    <span v-if="leftFlag&&rightFlag">/</span>
                                    <span v-if="rightFlag">{{right_speed}}</span>m
                                </p>
                                <p class="data">
                                    <span @click="getMsg(1)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/lift/lift_fs.png" />
                                    <span>风速</span>
                                </p>
                                <p class="num">
                                    <span v-if="leftFlag">{{left_windSpeed}}</span>
                                    <span v-if="leftFlag&&rightFlag">/</span>
                                    <span v-if="rightFlag">{{right_windSpeed}}</span>m/s
                                </p>
                                <p class="data">
                                    <span @click="getMsg(2)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/lift/lift_rs.png" />
                                    <span>人数</span>
                                </p>
                                <p class="num">
                                    <span v-if="leftFlag">{{left_personNo}}</span>
                                    <span v-if="leftFlag&&rightFlag">/</span>
                                    <span v-if="rightFlag">{{right_personNo}}</span>人
                                </p>
                                <p class="data">
                                    <span @click="getMsg(4)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/lift/lift_zz.png" />
                                    <span>载重</span>
                                </p>
                                <p class="num">
                                    <span v-if="leftFlag">{{left_weight}}</span>
                                    <span v-if="leftFlag&&rightFlag">/</span>
                                    <span v-if="rightFlag">{{right_weight}}</span>t
                                </p>
                                <p class="data">
                                    <span @click="getMsg(5)">历史数据</span>
                                </p>
                            </li>
                            <li>
                                <p class="des">
                                    <img src="./../../assets/images/fse/lift/lift_qj.png" />
                                    <span>倾角</span>
                                </p>
                                <p class="num">
                                    <span v-if="leftFlag">{{left_dipAngle}}</span>
                                    <span v-if="leftFlag&&rightFlag">/</span>
                                    <span v-if="rightFlag">{{right_dipAngle}}</span>°
                                </p>
                                <p class="data">
                                    <span @click="getMsg(6)">历史数据</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content nodata" v-if="!dataFlag"> 暂无升降机设备,请在升降机设备页,添加并绑定升降机设备</div>
        </div>
        <Modal v-model="msgModal" title="历史数据" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="log">
                <div class="list">
                    <div class="item">
                        <span>数据类型:</span>
                        <span>{{ msgType }}</span>
                    </div>
                    <div class="item">
                        <span>选择日期:</span>
                        <DatePicker type="date" :options="options" placeholder="请选择日期" style="width: 200px" format="yyyy-MM-dd" v-model="msgTime" :clearable="false"></DatePicker>
                        <el-button type="primary" @click="searchLog" style="margin-left:20px;" size="small" plain>搜索</el-button>
                    </div>
                </div>
                <div class="eachart" v-if="leftFlag">
                     <div class="canvas_none" v-if="dateList.length==0">
                        <img src="../../assets/images/common/canvas_none1.png" />
                    </div>
                    <div id="line" :style="{ height: '400px', width: '800px' }" ></div>
                </div>
                <div class="eachart" v-if="rightFlag">
                     <div class="canvas_none" v-if="dateList_right.length==0">
                        <img src="../../assets/images/common/canvas_none1.png" />
                    </div>
                    <div id="line_right" :style="{ height: '400px', width: '800px' }"></div>
                </div>
            </div>
        </Modal>
        <Modal v-model="videomodal"  :mask-closable="false" width="700px" :footer-hide="true">
            <div slot="header" style="display:flex;justify-content: space-between;">
                <span >视频直播</span>
            </div>
            <div class="chart video-play" v-show="videoFlag"></div>
            <div class="chart" v-show="!videoFlag">
                <video
                    ref="videoElement"
                    id="videoElement"
                    controls
                    autoplay
                    muted
                    width="668"
                    height="400"
                    style="object-fit: fill;outline:none;"
                ></video>
            </div>
        </Modal>
    </div>
</template>

<script>
import "@/sever/ezuikit.js";
import { getLiftList, getLiftDateLatest, getLiftDateLog,getLiftFvsList,getFvsToken,getStreamUrl } from "@/api/api.js";
import { format } from "@/sever/utils.js";
import hlsjs from "hls.js";
export default {
    data() {
        return {
            tabActiveName:"",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            list: [],
            liftId: "",
            left_height:"",
            left_speed:"",
            left_windSpeed:"",
            left_personNo:"",
            left_weight:"",
            left_dipAngle:"",
            left_frontDoorState:"",
            left_backDoorState:"",
            right_height:"",
            right_speed:"",
            right_windSpeed:"",
            right_personNo:"",
            right_weight:"",
            right_dipAngle:"",
            right_frontDoorState:"",
            right_backDoorState:"",
            msgModal: false,
            msgType: "",
            msgTime: new Date(),
            timeList: [],
            dateList: [],
            count: 0,
            msgName: "",
            dataFlag: false,
            activeId: -1,
            leftFlag:false,
            rightFlag:false,
            videomodal:false,
            zuoObj:{},
            youObj:{},
            dateList_right:[],
            timeList_right:[],
            videoFlag: true,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.deptName;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getAllList();
    },
    methods: {
        setTabClick(name) {
             this.activeId = this.list[name].liftId;
            this.liftId = this.list[name].liftId;
            this.getCraneDate();
            this.getFvsList();
        },
        //获取升降机列表
        getAllList() {
            let params = {
                deptId: this.deptId,
                bindFlag :1,
            };
            getLiftList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        if (res.data.list.length == 0) {
                            this.dataFlag = false;
                            this.liftId = "";
                            this.activeId = -1;
                        } else {
                            this.liftId = res.data.list[0].liftId;
                            this.activeId = res.data.list[0].liftId;
                            this.dataFlag = true;
                            this.getCraneDate();
                            this.getFvsList();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getCraneDate() {
            this.leftFlag = false;
            this.rightFlag = false;
            let params = {
                liftId: this.liftId
            };
            getLiftDateLatest(params)
                .then(res => {
                    if (res.code == 200) {
                        if(res.data.list.length > 0) {
                            res.data.list.forEach(i=>{
                                if(i.liftSide == 1) {
                                    //左
                                    this.leftFlag = true;
                                    this.left_height = i.height;
                                    this.left_speed = i.speed;
                                    this.left_windSpeed = i.windSpeed;
                                    this.left_personNo = i.personNo;
                                    this.left_weight = i.weight;
                                    this.left_dipAngle= i.dipAngle;
                                    this.left_frontDoorState = i.frontDoorState;
                                    this.left_backDoorState = i.backDoorState;
                                    let h  = 30 + this.left_height;
                                    let height = this.left_height
                                    $(".left_img").animate({bottom: height +'px'});
                                    $(".sjj_zuo").animate({bottom: h  +'px'});
                                } else if(i.liftSide == 2) {
                                    //右
                                    this.rightFlag= true;
                                    this.right_height = i.height;
                                    this.right_speed = i.speed;
                                    this.right_windSpeed = i.windSpeed;
                                    this.right_personNo = i.personNo;
                                    this.right_weight = i.weight;
                                    this.right_dipAngle= i.dipAngle;
                                    this.right_frontDoorState = i.frontDoorState;
                                    this.right_backDoorState = i.backDoorState;
                                    let height = this.right_height
                                    let h  = 30 +this.right_height;
                                    $(".right_img").animate({bottom:  height +'px'});
                                    $(".sjj_you").animate({bottom:  h  +'px'});
                                }
                            })
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getFvsList(){
            this.zuoObj ={};
            this.youObj ={};
            let params = {
                liftId: this.liftId
            };
            getLiftFvsList(params).then(res=>{
                if(res.code == 200) {
                    if(res.data.list.length > 0) {
                        res.data.list.forEach(i=>{
                            if(i.liftSide == 1) {
                                this.zuoObj = i;
                            } else if (i.liftSide == 2) {
                                this.youObj = i;
                            } 
                        })  
                    } 
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getJSON(data){
            return JSON.stringify(data) == '{}';
        },
        getFvs(item, index) {
            if(item.fvsDevice.deviceStatus == 1){
                $(".video-play").empty();
                this.videomodal = true;
                if(item.fvsDevice.platform == "0") {
                    this.getToken(item.fvsDevice.platform);
                }
                let params = {
                    id: item.fvsDevice.id
                };
                getStreamUrl(params)
                    .then(res => {
                        if (res.code == 200) {
                            let url; 
                            if (item.fvsDevice.playMode == 2) {
                                this.videoFlag = true;
                                url = res.data.ezopenHd;
                                this.getrecordPlay(url,index)
                            } else {
                                this.videoFlag = false;
                                if(res.data.playUrl){
                                    url = res.data.playUrl;
                                    this.$refs.videoElement.setAttribute('src',url)
                                }else{
                                    url = res.data.hls;
                                    this.showVideo(url);
                                }
                            }
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        getToken(platform){
            let params ={
                deptId:this.deptId,
                platform:platform
            }
            getFvsToken(params).then(res=>{
                if(res.code == 200) {
                    this.ezvizToken = res.data.token || '';
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getrecordPlay(url,index) {
            this.htmlVideo =
                "<div id='myVideo" + index + "' /> </div>";
            $(".video-play").html(this.htmlVideo);
            this.recordPlay = new EZUIPlayer({
                id: "myVideo" + index,
                url: url,
                autoplay: true,
                accessToken:this.ezvizToken,
                decoderPath: "./../../../static",
                width: 668,
                height: 400
            });
        },
        //play for flv
        showVideo(url) {
            let video = this.$refs.videoElement; //定义挂载点
            if (hlsjs.isSupported()) {
                this.hlsjs = new hlsjs();
                this.hlsjs.loadSource(url);
                this.hlsjs.attachMedia(video);
                this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
                    this.video.play();
                });
                this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
                    // console.log(event, data);
                    // 监听出错事件
                });
            } else {
                this.$message.error("不支持的格式");
                return;
            }
        },
        cancelVideo() {
            if (this.hlsjs) {
                this.$refs.videoElement.pause();
                this.hlsjs.destroy();
                this.hlsjs = null;
            }
        },
        flv_close() {
            this.videomodal = false;
            if(!this.videoFlag){
                this.$refs.videoElement.setAttribute('src','')
                this.cancelVideo();
            }else if(this.videoFlag){
                this.recordPlay.stop();
            }
        },
        getMsg(type) {
            this.msgTime = new Date();
            if (type == 0) {
                this.msgType = "高度";
                this.msgName = "米（m）";
            } else if (type == 1) {
                this.msgType = "速度";
                this.msgName = "米每秒（m/s）";
            } else if (type == 2) {
                this.msgType = "风速";
                this.msgName = "米每秒（m/s）";
            } else if (type == 3) {
                this.msgType = "楼层";
                this.msgName = "层";
            } else if (type == 4) {
                this.msgType = "人数";
                this.msgName = "人";
            } else if (type == 5) {
                this.msgType = "载重";
                this.msgName = "千克（kg）";
            } else if (type == 6) {
                this.msgType = "倾角";
                this.msgName = "角度（°）";
            }
            this.count = type;
            this.getLogMsg(type);
        },
        searchLog() {
            this.getLogMsg(this.count);
        },
        getLogMsg(type) {
            this.timeList = [];
            this.dateList = [];
            this.dateList_right = [];
            this.timeList_right = [];
            let params = {
                liftId: this.liftId,
                date: format(this.msgTime, "YYYY-MM-DD")
            };
            getLiftDateLog(params)
                .then(res => {
                    if (res.code == 200) {
                        this.msgModal = true;
                        if (res.data.list.length > 0) {
                            res.data.list.forEach(i => {
                                if(i.liftSide == 1) {
                                    this.timeList.push(i.time);
                                    if (type == 0) {
                                        this.dateList.push(i.height);
                                    } else if (type == 1) {
                                        this.dateList.push(i.speed);
                                    } else if (type == 2) {
                                        this.dateList.push(i.windSpeed);
                                    } else if (type == 3) {
                                        this.dateList.push(i.floor);
                                    } else if (type == 4) {
                                        this.dateList.push(i.personNo);
                                    } else if (type == 5) {
                                        this.dateList.push(i.weight*1000);
                                    } else if (type == 6) {
                                        this.dateList.push(i.dipAngle);
                                    }
                                    
                                } else if(i.liftSide == 2) {
                                    this.timeList_right.push(i.time);
                                    if (type == 0) {
                                        this.dateList_right.push(i.height);
                                    } else if (type == 1) {
                                        this.dateList_right.push(i.speed);
                                    } else if (type == 2) {
                                        this.dateList_right.push(i.windSpeed);
                                    } else if (type == 3) {
                                        this.dateList_right.push(i.floor);
                                    } else if (type == 4) {
                                        this.dateList_right.push(i.personNo);
                                    } else if (type == 5) {
                                        this.dateList_right.push(i.weight*1000);
                                    } else if (type == 6) {
                                        this.dateList_right.push(i.dipAngle);
                                    }
                                    
                                }
                            });
                        }
                        if(this.leftFlag){
                            this.darwLine();
                        }
                        
                        if(this.rightFlag){
                            this.darwLine_right();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        darwLine() {
            let line = this.$echarts.init(document.getElementById("line"));
            line.setOption({
                color: ["rgb(255, 179, 94)"],
                title :{ 
                    show:true,
                    text: '左轿厢',
                    x:'center',
                    y: 'top',
                    textStyle: { 
                        fontSize: 12,
                        color:"#1891FF",
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                    // formatter: "{b0}<br/>{a0}: {c0}"
                },
                grid: {
                    top: "18%",
                    left: "50px",
                    right: "14px",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    data: this.timeList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        // lineStyle: {
                        //   color: "#00FFFF"
                        // }
                    }
                },
                yAxis: {
                    show: true,
                    name: this.msgName,
                    splitLine: {
                        //去除网格线
                        show: false
                    },
                    axisLine: {
                        // lineStyle: {
                        //   color: "#00FFFF"
                        // }
                    }
                },
                series: [
                    {
                        name: this.msgName,
                        type: "line",
                        smooth: true ,
                        data: this.dateList,
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                // label: {
                                //   show: true, //开启显示
                                //   position: "top", //在上方显示
                                //   textStyle: {
                                //     //数值样式
                                //     color: "#02C0C0",
                                //     fontSize: 16
                                //   }
                                // },
                                lineStyle: {
                                    color: "#1891ff" //折线的颜色
                                },
                                color: "#2BB6FF"
                            }
                        }
                    }
                ]
            });
        },
        darwLine_right() {
            let line = this.$echarts.init(document.getElementById("line_right"));
            line.setOption({
                color: ["rgb(255, 179, 94)"],
                title :{ 
                    show:true,
                    text: '右轿厢',
                    x:'center',
                    y: 'top',
                    textStyle: { 
                        fontSize: 12,
                        color:"#1891FF",
                    }, 
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                    // formatter: "{b0}<br/>{a0}: {c0}"
                },
                grid: {
                    top: "18%",
                    left: "50px",
                    right: "14px",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    data: this.timeList_right,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        // lineStyle: {
                        //   color: "#00FFFF"
                        // }
                    }
                },
                yAxis: {
                    show: true,
                    name: this.msgName,
                    splitLine: {
                        //去除网格线
                        show: false
                    },
                    axisLine: {
                        // lineStyle: {
                        //   color: "#00FFFF"
                        // }
                    }
                },
                series: [
                    {
                        name: this.msgName,
                        type: "line",
                        smooth: true ,
                        data: this.dateList_right,
                        itemStyle: {
                            //上方显示数值
                            normal: {
                                // label: {
                                //   show: true, //开启显示
                                //   position: "top", //在上方显示
                                //   textStyle: {
                                //     //数值样式
                                //     color: "#02C0C0",
                                //     fontSize: 16
                                //   }
                                // },
                                lineStyle: {
                                    color: "#1891ff" //折线的颜色
                                },
                                color: "#2BB6FF"
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@import "./../../assets/style/fse.scss";
/deep/.container{
    // background-color: #F5F5F5;
    .content{
        /deep/.ivu-tabs-nav-scrollable{
            padding: 0 40px !important;
        }
    }
}
.sjj{
    // position: relative;
    width: 100%;
    height: 100%;
    position: relative;
    .db{
        width: 100%;
        height: 100px;
        img{
            width: 100%;
            height: 100%;
        }

    }
    .bottom_right{
        position:absolute;
        top: 10px;
        right: 10px;
        background: #EDF9FD;
        border: 1px solid var(--themeColor);
        border-radius: 0.1rem;
        padding: 10px;
        p{  
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--themeColor);
            // margin-bottom: 10px;
            span{
                text-align: center;
                width: 50px;
                font-size: 14px;
            }
            span:first-child{
                // width: 50px;
                margin-right: 10px; 
                
            }
        }
    }
    .bottom_left{
        position:absolute;
        top: 10px;
        left: 10px;
        background: #EDF9FD;
        border: 1px solid var(--themeColor);
        border-radius: 0.1rem;
        padding: 10px;
        p{  
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--themeColor);
            // margin-bottom: 10px;
            span{
                text-align: center;
                width: 50px;
                font-size: 14px;
            }
            span:first-child{
                // width: 50px;
                margin-right: 10px; 
                
            }
        }
    }
    .dz{
        width: 100%;
        height: calc(100% - 100px);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        img{
            display: block;
            width: 50px;
            height: 100%;
        }
        .sjj_right{
            position: relative;
            width: 70px;
            height: 100px;
            img{
                position: absolute;
                bottom: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
            }
            .sjj_you{
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: 30px;
                right: 20px;
                img{
                    display: block;
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                }
            }
        }
        .sjj_left{
           position: relative;
           width: 70px;
           height: 100px;
           img{ 
                position: absolute;
                bottom: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
            .sjj_zuo{
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: 30px;
                left: 20px;
                img{
                    
                    display: block;
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                }
            }
        }
    } 
    .disabled{
        cursor: no-drop !important;
    }
}
</style>
